<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GoodHR 自动化工具</title>
    <link rel="icon" type="image/png" href="sounds/logo.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="/eel.js"></script>
    <style>
        .app-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px 20px;
        }

        .app-logo {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }

        .header-left,
        .header-center,
        .header-right {
            display: flex;
            align-items: center;
        }

        .header-center {
            flex-grow: 1;
            justify-content: center;
        }

        .contact-info {
            color: #666;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <!-- 更新提示弹窗 -->
    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true"
        data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalLabel">发现新版本</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="updateCloseBtn"></button>
                </div>
                <div class="modal-body">
                    <p>当前版本: <span id="currentVersion"></span></p>
                    <p>最新版本: <span id="newVersion"></span></p>
                    <p>更新说明:</p>
                    <div id="releaseNotes" class="alert alert-info"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        id="updateLaterBtn">稍后更新</button>
                    <button type="button" class="btn btn-primary" id="updateNowBtn">立即更新</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 公告弹窗 -->
    <div class="modal fade" id="announcementModal" tabindex="-1" aria-labelledby="announcementModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="announcementModalLabel">系统公告</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="announcementContent" class="alert alert-warning"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">我知道了</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <header>
            <div class="app-header">
                <div class="header-center">
                    <h1 class="text-center my-0">GoodHR 自动化工具</h1>
                </div>
            </div>
        </header>

        <!-- 版本选择导航栏 -->
        <div class="row mb-4">
            <div class="col-12">
                <ul class="nav nav-pills nav-fill version-nav">
                    <li class="nav-item">
                        <a class="nav-link" id="version-free" data-value="free" href="#">
                            <div class="version-title">免费版</div>
                            <div class="version-desc">每天100次免费打招呼</div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="version-donation" data-value="donation" href="#">
                            <div class="version-title">捐赠版</div>
                            <div class="version-desc">每月19元无限打招呼</div>
                            <div class="version-desc">新用户试用10天、购买、请联系作者</div>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="version-enterprise" data-value="enterprise" href="#">
                            <div class="version-title">企业版</div>
                            <div class="version-desc">AI加持，分析更精准</div>
                            <div class="version-desc">新用户试用1000次、购买、请联系作者</div>
                        </a>
                    </li>
                </ul>
                <!-- 隐藏的单选按钮，用于保持与原有逻辑兼容 -->
                <div style="display: none;">
                    <input type="radio" name="version" id="version1" value="free">
                    <input type="radio" name="version" id="version2" value="donation">
                    <input type="radio" name="version" id="version3" value="enterprise">
                </div>
            </div>
        </div>

        <!-- 功能选择 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h5>功能选择</h5>
                    </div>
                    <div class="card-body">
                        <div class="function-options">
                            <div class="form-check form-check-inline ">
                                <input class="form-check-input" type="radio" name="function" id="function1"
                                    value="greet" checked>
                                <div class="d-flex align-items-center mb-2">
                                    <label class="form-check-label" for="function1">打招呼</label>
                                </div>
                                <div class="function-desc">自动向符合条件的候选人打招呼，提高招聘效率</div>
                            </div>
                            <div class="form-check form-check-inline ">
                                <input class="form-check-input" type="radio" name="function" id="function2"
                                    value="resume" disabled>
                                <div class="d-flex align-items-center ">
                                    <label class="form-check-label" for="function2">索要简历 <span
                                            class="badge bg-warning text-dark">开发中</span></label>
                                </div>
                                <div class="function-desc">自动向已建立联系的候选人索要简历</div>
                            </div>
                            <div class="form-check form-check-inline ">
                                <input class="form-check-input" type="radio" name="function" id="function3"
                                    value="analyze" disabled>
                                <div class="d-flex align-items-center ">
                                    <label class="form-check-label" for="function3">分析简历 <span
                                            class="badge bg-warning text-dark">开发中</span></label>
                                </div>
                                <div class="function-desc">使用AI自动分析收到的简历，筛选合适人选</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 设置区域 -->
            <div class="col-md-6">
                <!-- 版本信息卡片 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>版本信息</h5>
                    </div>
                    <div class="card-body">
                        <div id="version-info">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">当前版本:</span>
                                <span id="current-version">未选择</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">今日已打招呼:</span>
                                <span id="greet-count">0</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="fw-bold">剩余额度:</span>
                                <span id="remaining-quota">0</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="fw-bold">到期时间:</span>
                                <span id="expiry-date">-</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-header">
                        <h5>基本设置</h5>
                    </div>
                    <div class="card-body">
                        <!-- 平台选择 -->
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold">招聘平台:</label>
                            <div class="platform-options">
                                <!-- 平台选项将通过JavaScript动态生成 -->
                            </div>
                        </div>

                        <!-- 手机号输入 -->
                        <div class="form-group mb-3">
                            <label for="phone" class="form-label fw-bold">手机号:</label>
                            <input type="text" class="form-control" id="phone" placeholder="请输入手机号">
                            <small class="form-text text-muted">* 将此页面填写的数据保存到服务器(不会泄露)</small>
                        </div>

                        <!-- 浏览器路径 -->
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold">浏览器路径:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="browser-path" readonly>
                                <button class="btn btn-outline-secondary" type="button" id="select-browser">选择</button>
                            </div>
                        </div>

                        <!-- 延迟时间设置 -->
                        <div class="form-group mb-3">
                            <label class="form-label fw-bold">候选人打开延迟时间 (秒):</label>
                            <div class="row">
                                <div class="col-6">
                                    <div class="input-group">
                                        <span class="input-group-text">最小</span>
                                        <input type="number" class="form-control" id="min-delay" min="1" max="20"
                                            value="7">
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="input-group">
                                        <span class="input-group-text">最大</span>
                                        <input type="number" class="form-control" id="max-delay" min="1" max="20"
                                            value="12">
                                    </div>
                                </div>
                            </div>
                            <small class="form-text text-muted">设置打开候选人后的随机延迟时间 (5-20秒)</small>
                        </div>

                        <!-- 停止条件设置 -->
                        <div class="mb-3">
                            <label for="stop-count" class="form-label">停止条件</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="stop-count" min="1" value="100"
                                    placeholder="请输入停止数量">
                                <span class="input-group-text">次</span>
                            </div>
                            <div class="form-text">设置处理多少个候选人后自动停止，默认100次</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 岗位列表区域 -->
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>岗位列表</h5>
                        <button class="btn btn-sm btn-primary" id="add-job-btn">添加岗位</button>
                    </div>
                    <div class="card-body">
                        <div id="job-list" class="job-list">
                            <!-- 岗位列表将通过JavaScript动态添加 -->
                            <div class="text-center text-muted" id="no-jobs">
                                暂无岗位，请点击"添加岗位"按钮添加
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 智能匹配设置卡片 -->
                <div class="card mb-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">智能匹配设置</h5>
                        <div class="keyword-buttons">
                            <button id="add-include-keyword-btn" class="btn btn-sm btn-primary"
                                disabled>添加包含关键词</button>
                            <button id="add-exclude-keyword-btn" class="btn btn-sm btn-danger" disabled>添加排除关键词</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 企业版岗位描述 -->
                        <div id="job-description-container" style="display: none;">
                            <div class="mb-3">
                                <label for="job-description" class="form-label">岗位描述</label>
                                <textarea class="form-control" id="job-description" rows="4"
                                    placeholder="请输入岗位描述，用于AI智能匹配候选人"></textarea>
                                <div class="form-text">您可以将平台上的岗位描述复制到这里，用于AI智能匹配候选人(建议加上硬性要求)</div>
                            </div>
                        </div>

                        <!-- 免费版和捐赠版关键词设置 -->
                        <div id="keyword-settings-container">
                            <!-- 关键词关系选择器 -->
                            <div id="keyword-relation" class="keyword-relation mb-2" style="display: none;">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="keyword-relation"
                                        id="relation-or" value="OR" checked>
                                    <label class="form-check-label" for="relation-or">任一匹配 (OR)(强烈推荐)</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="keyword-relation"
                                        id="relation-and" value="AND">
                                    <label class="form-check-label" for="relation-and">全部匹配 (AND)</label>
                                </div>
                            </div>

                            <div id="keyword-list" class="keyword-list"></div>
                            <div id="no-keywords" class="text-center text-muted py-3">请先选择岗位</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 日志区域 -->
        <div class="row" style="margin-bottom:100px">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>运行日志</h5>
                        <button class="btn btn-sm btn-outline-secondary" id="clear-log">清空日志</button>
                    </div>
                    <div class="card-body">
                        <div id="log-container" class="log-container">
                            <!-- 日志内容将通过JavaScript动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 控制按钮容器 -->
    <div class="control-buttons-container">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <button id="start-button" class="btn btn-success w-100">开始运行</button>
                </div>
                <div class="col-6">
                    <button id="stop-button" class="btn btn-danger w-100" disabled>停止</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加岗位模态框 -->
    <div class="modal fade" id="addJobModal" tabindex="-1" aria-labelledby="addJobModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addJobModalLabel">添加岗位</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="job-name" class="form-label">岗位名称</label>
                        <input type="text" class="form-control" id="job-name" placeholder="请输入岗位名称">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-job-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加关键词模态框 -->
    <div class="modal fade" id="addKeywordModal" tabindex="-1" aria-labelledby="addKeywordModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addKeywordModalLabel">添加关键词</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="keyword-text" class="form-label">关键词</label>
                        <input type="text" class="form-control" id="keyword-text" placeholder="请输入关键词">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="save-keyword-btn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义提示弹框 -->
    <div class="modal fade" id="customAlertModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customAlertTitle">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="customAlertMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义错误弹框 -->
    <div class="modal fade" id="customErrorModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title">错误</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="customErrorMessage"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义输入弹框 -->
    <div class="modal fade" id="customInputModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customInputTitle">输入</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="customInputPrompt"></p>
                    <input type="text" class="form-control" id="customInputField">
                    <div id="customInputError" class="text-danger mt-2" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="customInputConfirm">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入JavaScript文件 -->
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/app.js"></script>
</body>

</html>